<style scoped>
    .action-link {
        cursor: pointer;
    }
</style>

<template>
    <div>
        <div class="card card-default">
            <div class="card-header"> Auth Code</div>
            <div class="card-body">
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text" id="basic-clientid">ClientID:</span>
                    </div>
                    <input type="text" v-model="client_id" class="form-control" placeholder="ClientID"
                           aria-label="AuthCode" aria-describedby="basic-clientid">
                </div>
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text" id="basic-redirect_uri">Redirect URI:</span>
                    </div>
                    <input type="text" v-model="redirect_uri" class="form-control" placeholder="Redirect URI"
                           aria-label="AuthCode" aria-describedby="basic-redirect_uri">
                </div>
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text" id="basic-response_type">Response Type:</span>
                    </div>
                    <input type="text" v-model="response_type" class="form-control" placeholder="Grant Type"
                           aria-label="AuthCode" aria-describedby="basic-response_type">
                </div>
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text" id="basic-domainurl">DOMAIN URL:</span>
                    </div>
                    <input type="text" v-model="domain_url" class="form-control" placeholder="Domain Url"
                           aria-label="AuthCode" aria-describedby="basic-domainurl">
                </div>
                <button type="button" @click="authcode" class="btn btn-primary">GET Code</button>
            </div>
        </div>
        <div class="card card-default">
            <div class="card-header">Auth Token</div>
            <div class="card-body">
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text" id="basic-addon1">Code:</span>
                    </div>
                    <input type="text" v-model="code" class="form-control" placeholder="AuthCode"
                           aria-label="AuthCode" aria-describedby="basic-addon1">
                </div>

                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text" id="basic-secret">Client Secrect:</span>
                    </div>
                    <input type="text" v-model="client_secret" class="form-control" placeholder="Client Secret"
                           aria-label="AuthCode" aria-describedby="basic-secret">
                </div>
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text" id="basic-granttype">Grant Type:</span>
                    </div>
                    <input type="text" v-model="grant_type" class="form-control" placeholder="Grant Type"
                           aria-label="AuthCode" aria-describedby="basic-granttype">
                </div>
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text" id="basic-username">User Name:</span>
                    </div>
                    <input type="text" v-model="username" class="form-control" placeholder="User Name"
                           aria-label="AuthCode" aria-describedby="basic-username">
                </div>
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text" id="basic-password">Password:</span>
                    </div>
                    <input type="text" v-model="password" class="form-control" placeholder="Password"
                           aria-label="AuthCode" aria-describedby="basic-password">
                </div>

                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text" id="basic-scope">scope:</span>
                    </div>
                    <input type="text" v-model="scope" class="form-control" placeholder="Scope"
                           aria-label="AuthCode" aria-describedby="basic-scope">
                </div>

                <div class="input-group">
                    <div class="input-group-prepend">
                        <span class="input-group-text">返回数据</span>
                    </div>
                    <textarea class="form-control" v-model="response_data" aria-label="With textarea"></textarea>
                </div>



                <button type="button" @click="authtoken" class="btn btn-primary">GET TOKEN</button>
                <button type="button" @click="passauthtoken" class="btn btn-primary">PASSWORD TOKEN</button>
                <button type="button" @click="clientauthtoken" class="btn btn-primary">CLIENT TOKEN</button>
            </div>
        </div>

        <div v-if="tokens.length > 0">
            <div class="card card-default">
                <div class="card-header">Authorized Applications</div>

                <div class="card-body">
                    <!-- Authorized Tokens -->
                    <table class="table table-borderless mb-0">
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>Scopes</th>
                                <th></th>
                            </tr>
                        </thead>

                        <tbody>
                            <tr v-for="token in tokens">
                                <!-- Client Name -->
                                <td style="vertical-align: middle;">
                                    {{ token.client.name }}
                                </td>

                                <!-- Scopes -->
                                <td style="vertical-align: middle;">
                                    <span v-if="token.scopes.length > 0">
                                        {{ token.scopes.join(', ') }}
                                    </span>
                                </td>

                                <!-- Revoke Button -->
                                <td style="vertical-align: middle;">
                                    <a class="action-link text-danger" @click="revoke(token)">
                                        Revoke
                                    </a>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import Qs from 'Qs';
    export default {
        /*
         * The component's data.
         */
        data() {
            return {
                tokens: [],
                client_id:"20",
                username:"",
                password:"",
                scope:"",
                client_secret:"VCKjQoR0iH5GHspuD5zqoME8JKvVqUKpzr7UBJsH",
                grant_type:"authorization_code",
                code:"",
                redirect_uri:"http://pyrocms.test/test",
                response_data:"",
                response_type:"code",
                domain_url:"http://pyrocms.test/"
            };
        },

        /**
         * Prepare the component (Vue 1.x).
         */
        ready() {
            this.prepareComponent();
        },
        load(){
            this.code = this.$route.params.code
        },
        /**
         * Prepare the component (Vue 2.x).
         */
        mounted() {
            this.prepareComponent();
        },

        methods: {
            clientauthtoken(){
                let [client_id,client_secret,scope,grant_type]= [this.client_id,this.client_secret,this.scope,this.grant_type];
                var data = {
                    client_id,
                    client_secret,
                    scope,
                    grant_type};
                console.log(JSON.stringify(data));
                axios.post(this.domain_url + '/oauth/token',data,
                    {
                        "headers":{'Content-Type': 'application/x-www-form-urlencoded'},
                        transformRequest:function (data) {
                            var a= Qs.stringify(data);
                            return a;
                        }
                    })
                    .then(response => {
                        this.response_data = JSON.stringify( response.data);
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            passauthtoken(){
                let [client_id,client_secret,scope,grant_type,username,password]= [this.client_id,this.client_secret,this.scope,this.grant_type,this.username,this.password];
                var data = {
                    client_id,
                    client_secret,
                    scope,
                    grant_type,
                    username,
                    password};
                console.log(JSON.stringify(data));
                axios.post(this.domain_url + '/oauth/token',data,
                    {
                        "headers":{'Content-Type': 'application/x-www-form-urlencoded'},
                        transformRequest:function (data) {
                            var a= Qs.stringify(data);
                            return a;
                        }
                    })
                    .then(response => {
                        this.response_data = JSON.stringify( response.data);
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            authtoken(){
                let [client_id,client_secret,code,grant_type,redirect_uri]= [this.client_id,this.client_secret,this.code,this.grant_type,this.redirect_uri];
                var data = {
                        client_id,
                        client_secret,
                        code,
                        grant_type,
                        redirect_uri};
                console.log(JSON.stringify(data));
                axios.post(this.domain_url + '/oauth/token',data,
                    {
                        "headers":{'Content-Type': 'application/x-www-form-urlencoded'},
                        transformRequest:function (data) {
                            var a= Qs.stringify(data);
                            return a;
                        }
                    })
                    .then(response => {
                        this.response_data = JSON.stringify( response.data);
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            authcode: function () {
                window.open( this.domain_url + `/oauth/authorize?client_id=${this.client_id}&response_type=${this.response_type}&redirect_uri=${this.redirect_uri}`)
            },
            /**
             * Prepare the component (Vue 2.x).
             */
            prepareComponent() {
                this.getTokens();
            },

            /**
             * Get all of the authorized tokens for the user.
             */
            getTokens() {
                axios.get('/oauth/tokens')
                        .then(response => {
                            this.tokens = response.data;
                        });
            },

            /**
             * Revoke the given token.
             */
            revoke(token) {
                axios.delete('/oauth/tokens/' + token.id)
                        .then(response => {
                            this.getTokens();
                        });
            }
        }
    }
</script>
